import React, { useRef, useState } from 'react';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import request from '@/utils/request';
import type { ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';

export interface MyDataTableProps {
  title?: React.ReactNode;
  columns: any[];
  size?: SizeType;
  freshNum?: number;
  pageSize: number;
  control: string;
  act: string;
  doubleClick?: (item: any) => void;
  callback?: (item: any) => void;
  rowSelection?: any;
  showRefresh?: boolean;
  children?: any;
  params?: any;
  bordered?: boolean;
  scroll?: any;
  expandable?: any;
  search?: any;
  cardBordered?: boolean;
  rowKey?: any;
  pagination?: boolean;
  toolBarRender?: any;
  editable?: any;
  responseFun?: (item: any) => void;
}
const MyDataTable: React.FC<MyDataTableProps> = (props: MyDataTableProps) => {
  const [pageIndex, setPageIndex] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(props.pageSize);
  const proTbRef = useRef<ActionType>();

  const fetchData = async (params: any) => {
    const apiURL = '/api/services/app/' + props.control + '/';
    const skipCount = ((params.current >= 1 ? params.current : pageIndex) - 1) * pageSize;
    const result: any = {
      data: [],
      total: 0,
    };
    await request(apiURL + props.act, {
      method: 'GET',
      params: {
        ...params,
        skipCount,
        maxResultCount: pageSize,
        keywords: params.partNum
          ? params.partNum
          : params.partDescription
          ? params.partDescription
          : undefined,
        ...props.params,
      },
    }).then((response) => {
      if (response) {
        if (response.success) {
          if (props.responseFun) {
            response = props.responseFun(response);
          }
          result.data = response.result.items;
          result.total = response.result.totalCount;
          if (props.callback) {
            props.callback(response.result);
          }
        }
      }
    });
    return result;
  };
  React.useEffect(() => {
    proTbRef.current?.reload();
  }, [props.freshNum]);
  return (
    <ProTable
      actionRef={proTbRef}
      columns={props.columns}
      cardBordered={props.cardBordered}
      bordered={props.bordered}
      rowSelection={props.rowSelection}
      request={async (params = {}) => {
        return fetchData(params);
      }}
      rowKey={props.rowKey ? props.rowKey : 'id'}
      search={props.search ? props.search : false}
      pagination={
        props.pagination
          ? {
              pageSize: props.pageSize,
              onChange: (page, _pageSize) => {
                setPageSize(_pageSize);
                setPageIndex(page);
              },
            }
          : false
      }
      headerTitle={props.title}
      toolBarRender={props.toolBarRender ? props.toolBarRender : false}
      onRow={(record) => {
        return {
          onDoubleClick: () => {
            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
            props.doubleClick ? props.doubleClick(record) : undefined;
          },
        };
      }}
      scroll={props.scroll}
      editable={props.editable}
      size={props.size}
    />
  );
};
export default MyDataTable;
